[AngularJS] ng-mtg#6 AngularJS 勉強会 参加レポート

車輪開発大好きおたいがです。こんにちは。（挨拶）

本日、下記イベントに参加してきたのでレポート ( 箇条書きメモ ) します。

ng-mtg#6 AngularJS 勉強会
http://angularjs-jp.doorkeeper.jp/events/12996

今回のテーマは Directive & セキュリティということで、案件実績のある講師による講演でした。

『 ディレクティブパターン 』
株式会社 LIG 林 優一 氏

実務におけるディレクティブ開発経験を元に、基本的なお作法の解説を交えつつ、ディレクティブ実装パターンについて紹介されました。

ディレクティブ実装パターン

テンプレートパターン

共通のテンプレートを反映させるためのディレクティブパターン

共通パターン

ビューと実装をカプセル化するようなディレクティブパターン

イベントフックパターン

ユーザーのイベントとハンドリング処理をラップしたディレクティブパターン

jQuery プラグインパターン

jQuery のプラグインをどうしても使いたいときに使用するパターン ( ゴミ処理を忘れずに )

見てると嬉しくなる複雑なディレクティブの例

ng-grid
http://angular-ui.github.io/ng-grid/

より良いパフォーマンスのために

• HTTP リクエストが増えすぎたときは $templateCache を利用
• Grunt や Gulp を使うと便利

grunt-angular-templates
https://www.npmjs.org/package/grunt-angular-templates

gulp-angular-templatecache
https://www.npmjs.org/package/gulp-angular-templatecache

まとめ

• コンパクトで分かりやすくなる
• コントローラの負担を減らすために、DOM 操作系は極力ディレクティブに
• 共通パーツを使いまわして効率UP

サンプル

https://github.com/frontainer/angular-sample2

http://frontainer.com/angular-sample2/#/

『 Directive で実現できたこと』
株式会社ピースオブケイク 今 雄一 氏

文章、写真、イラスト、音楽、映像などの投稿サービスである 「 note ( https://note.mu/ ) 」で実際に使用されているディレクティブについて紹介されました。

• Controller は極力薄く
• Isolate Directive ( scope { hoge : "=" } ) にする
• やってることはだいたい同じ
• DOM 操作はディレクティブ
• prototype chain を意識したモデル設計しましょう

『 そろそろ押さえておきたい AngularJS のセキュリティ 』
html5j Web プラットフォーム部 にしむねあ 氏

AngularJS 1.3.0-beta.16 を元に AngularJS の脆弱性対策について紹介されました。

XSS, CSRF など脆弱性に関して疎いので大変お勉強になりました。下記セッションスライドは必見です。

スライド

特にカスタムディレクティブを作るときの注意点に関しては、参考になりました。

ライトニングトーク
株式会社サイバーエージェント 五藤 佑典 氏

http://simplog.jp/ の開発におけるメリットについて紹介されました。

jqLite だけだとジワる。つらい。併用しましょう。

感想

自分が経験した実務に対する「答え合わせ的」な目的を兼ねて参加したのですが、だいたい予想通りな内容でした。

• テンプレート共通化
• 機能のカプセル化
• DOM 操作
• jQuery の操作

あたりがディレクティブ作成の主な用途になるということで、設計のセンスが求められそうです。